<template>
  <el-form ref="form" :model="formData" label-width="100px" style="width: 100%;">
    <el-collapse v-model="formData.activeName" accordion>
      <el-collapse-item name="1">
        <template v-slot:title>
          <i class="header-icon el-icon-bangzhu" style="margin-left: 10px;font-weight: bold;color: #6c6c6c;"><span style="font-weight: bold;color: #6c6c6c;"> 基本信息</span></i>
        </template>
        <el-form-item>
          <span slot="label">
            <el-tooltip content="必须以字母或者_作为开头，只能存在字母、数字、_ 和 -，单个流程内的必须唯一" placement="left">
              <i class="el-icon-question" />
            </el-tooltip>
            节点key
          </span>
          <el-input v-model="formData.id" size="mini" />
        </el-form-item>
        <el-form-item label="节点名称">
          <el-input v-model="formData.name" size="mini" />
        </el-form-item>
        <el-form-item label="节点描述">
          <el-input v-model="formData.desc" type="textarea" size="mini" />
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
    <el-collapse accordion>
      <el-collapse-item>
        <template v-slot:title>
          <i class="header-icon el-icon-user" style="margin-left: 10px;font-weight: bold;color: #6c6c6c;"><span style="font-weight: bold;color: #6c6c6c;"> 审核信息</span></i>
        </template>
        <el-form-item label="值类型">
          <el-radio v-model="formData.valueType" label="first">存储值</el-radio>
          <el-radio v-model="formData.valueType" label="second">固定值</el-radio>
        </el-form-item>
        <div v-show="formData.valueType === 'first'">
          <el-form-item label="用户类型">
            <el-select v-model="formData.auditType" placeholder="请选择" size="mini" style="width: 100%;" clearable>
              <el-option key="01" label="指定人" value="01" />
              <el-option key="02" label="候选人" value="02" />
              <el-option key="03" label="候选角色" value="03" />
              <el-option key="04" label="候选岗位" value="04" />
              <el-option key="05" label="候选部门" value="05" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="formData.auditType === '01'" label="处理人">
            <el-select v-model="formData.assignee" filterable placeholder="请选择" size="mini" style="width: 100%;" clearable>
              <el-option v-for="item in users" :key="item.code" :label="item.text" :value="item.code" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="formData.auditType === '02'" label="候选人">
            <el-select v-model="formData.candidateUsers" filterable placeholder="请选择" size="mini" style="width: 100%;" clearable>
              <el-option v-for="item in users" :key="item.code" :label="item.text" :value="item.code" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="formData.auditType === '03'" label="候选角色">
            <el-select v-model="formData.candidateGroups" filterable size="mini" style="width: 100%;" placeholder="请选择">
              <el-option
                v-for="item in roleOptions"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="formData.auditType === '04'" label="候选岗位">
            <el-select v-model="formData.candidateGroups" filterable size="mini" style="width: 100%;" placeholder="请选择">
              <el-option
                v-for="item in postOptions"
                :key="item.postId"
                :label="item.postName"
                :value="item.postId"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="formData.auditType === '05'" label="候选部门">
            <el-input v-model="formData.candidateGroups" filterable size="mini" />
          </el-form-item>
        </div>
        <div v-show="formData.valueType === 'second'">
          <el-form-item label="用户类型">
            <el-select v-model="formData.auditType" placeholder="请选择" size="mini" style="width: 100%;" clearable>
              <el-option key="01" label="指定人" value="01" />
              <el-option key="02" label="候选人" value="02" />
              <el-option key="03" label="候选角色" value="03" />
              <el-option key="04" label="候选岗位" value="04" />
              <el-option key="05" label="候选部门" value="05" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="formData.auditType === '01'" label="处理人">
            <el-input v-model="formData.assignee" size="mini" clearable />
          </el-form-item>
          <el-form-item v-if="formData.auditType === '02'" label="候选人">
            <el-input v-model="formData.candidateUsers" size="mini" clearable />
          </el-form-item>
          <el-form-item v-if="formData.auditType === '03'" label="候选角色">
            <el-input v-model="formData.candidateGroups" size="mini" clearable />
          </el-form-item>
          <el-form-item v-if="formData.auditType === '04'" label="候选岗位">
            <el-input v-model="formData.candidateGroups" size="mini" clearable />
          </el-form-item>
          <el-form-item v-if="formData.auditType === '05'" label="候选部门">
            <el-input v-model="formData.candidateGroups" size="mini" clearable />
          </el-form-item>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-collapse accordion>
      <el-collapse-item>
        <template v-slot:title>
          <i class="header-icon el-icon-headset" style="margin-left: 10px;font-weight: bold;color: #6c6c6c;"><span style="font-weight: bold;color: #6c6c6c;"> 任务监听器</span></i>
        </template>
      </el-collapse-item>
    </el-collapse>
    <el-collapse accordion>
      <el-collapse-item>
        <template v-slot:title>
          <i class="header-icon el-icon-position" style="margin-left: 10px;font-weight: bold;color: #6c6c6c;"><span style="font-weight: bold;color: #6c6c6c;"> 扩展属性</span></i>
        </template>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script>
import { getAllOrgList } from '@/views/sys/org/api'
import { handleGetAllRoleList } from '@/views/sys/role/api'
import { handleGetAllPostList } from '@/views/sys/post/api'

export default {
  name: 'TaskPanel',
  components: {},
  directives: {},
  filters: {},
  // props属性
  props: {
    modeler: {
      type: Object,
      required: true
    },
    element: {
      type: Object,
      required: true
    },
    users: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeName: 'first',
      orgOptions: [],
      roleOptions: [],
      postOptions: [],
      formData: {
        activeName: '1',
        valueType: 'first',
        auditType: '01',
        id: this.element.businessObject.id ? this.element.businessObject.id : '',
        name: this.element.businessObject.name ? this.element.businessObject.name : '',
        desc: this.element.businessObject.documentation ? this.element.businessObject.documentation[0].text : '',
        assignee: this.element.businessObject.$attrs['flowable:assignee'] ? this.element.businessObject.$attrs['flowable:assignee'] : '',
        candidateUsers: this.element.businessObject.$attrs['flowable:candidateUsers'] ? this.element.businessObject.$attrs['flowable:candidateUsers'] : '',
        candidateGroups: this.element.businessObject.candidateGroups ? this.element.businessObject.candidateGroups : ''
      }
    }
  },
  watch: {
    'formData.id': function(val) {
      console.log('更新后的值：' + val)
      this.updateProperties({ id: val })
    },
    'formData.name': function(val) {
      console.log('更新后的值：' + val)
      this.updateProperties({ name: val })
    },
    'formData.desc': function(val) {
      console.log('更新后的值：' + val)
      if (!val) {
        this.updateProperties({ documentation: [] })
        return
      }
      const documentationElement = this.modeler.get('moddle').create('bpmn:Documentation', { text: val })
      this.updateProperties({ documentation: [documentationElement] })
    },
    'formData.assignee': function(val) {
      // if (this.formData.userType !== 'assignee') {
      //   delete this.element.businessObject.$attrs[`flowable:assignee`]
      //   return
      // }
      console.log('更新后的值：' + val)
      this.updateProperties({ 'flowable:assignee': val })
    },
    'formData.candidateUsers': function(val) {
      console.log('更新后的值：' + val)
      this.updateProperties({ 'flowable:candidateUsers': val })
    },
    'formData.candidateGroups': function(val) {
      console.log('更新后的值：' + val)
      this.updateProperties({ 'flowable:candidateGroups': val })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    getAllOrgList().then(res => {
      this.orgOptions = res.data
    })
    handleGetAllRoleList().then(res => {
      this.roleOptions = res.data
    })
    handleGetAllPostList().then(res => {
      this.postOptions = res.data
    })
  },
  // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
  mounted() {},
  methods: {
    updateProperties(properties) {
      const modeling = this.modeler.get('modeling')
      modeling.updateProperties(this.element, properties)
    },
    updateElement() {
      if (this.formData.taskListener?.length) {
        let extensionElements = this.element.businessObject.get('extensionElements')
        if (!extensionElements) {
          extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
        }
        // 清除旧值
        extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? []
        this.formData.taskListener.forEach(item => {
          const taskListener = this.modeler.get('moddle').create('flowable:TaskListener')
          taskListener['event'] = item.event
          taskListener[item.type] = item.className
          if (item.params && item.params.length) {
            item.params.forEach(field => {
              const fieldElement = this.modeler.get('moddle').create('flowable:Field')
              fieldElement['name'] = field.name
              fieldElement[field.type] = field.value
              // 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack
              // const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value })
              // fieldElement[field.type] = valueElement
              taskListener.get('fields').push(fieldElement)
            })
          }
          extensionElements.get('values').push(taskListener)
        })
        this.updateProperties({ extensionElements: extensionElements })
      } else {
        const extensionElements = this.element.businessObject[`extensionElements`]
        if (extensionElements) {
          extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? []
        }
      }
    }
  }
}
</script>

<style>
.el-form-item--small.el-form-item {
  margin-top: 5px;
  margin-bottom: 5px;
  width: 98%;
}

/* 给展开的标题添加下划线 */
.el-collapse-item__header {
  height: 35px;
  line-height: 35px;
}

.el-collapse-item__header.is-active {
  border-bottom: 1px solid rgba(222, 217, 217, 0.7); /* 您可以根据需要调整下划线的颜色和样式 */
  height: 35px;
  line-height: 35px;
}
</style>
